<template>
  <section id="intro">
    <div class="intro-container">
      <div id="introCarousel" class="carousel  slide carousel-fade" data-ride="carousel">

        <ol class="carousel-indicators">
          <li data-target="#introCarousel" v-for="(item,index) in 2" :key="index" :data-slide-to="item-1"></li>
          <li data-target="#introCarousel" :data-slide-to="2" class="active"></li>
        </ol>

        <div class="carousel-inner" role="listbox">

          <div class="carousel-item " v-for="(item,index) in slideitems" :key="index" :style="{backgroundImage: 'url(' + item.img + ')'}">
            <div class="carousel-container">
              <div class="carousel-content">
                <h2>{{item.title}}</h2>
                <p>{{item.introduction}}</p>
                <a href="#featured-services" class="btn-get-started scrollto">了解更多</a>
              </div>
            </div>
          </div>

          <div class="carousel-item active" :style="{backgroundImage: 'url(' + activeslideitems.img + ')'}">
            <div class="carousel-container">
              <div class="carousel-content">
                <h2>{{activeslideitems.title}}</h2>
                <p>{{activeslideitems.introduction}}</p>
                <a href="#featured-services" class="btn-get-started scrollto">了解更多</a>
              </div>
            </div>
          </div>

        </div>

        <a class="carousel-control-prev" href="#introCarousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon ion-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>

        <a class="carousel-control-next" href="#introCarousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon ion-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>

      </div>

    </div>

  </section>
</template>
<script>
export default {
  name: "introCarousel",
  data() {
    return {
      activeslideitems: {
        img: require("@/img/intro-carousel/5.jpg"),
        title: "冷链数据管理专家",
        introduction:
          "食品、药品（疫苗）等在运输和储藏过程中的温度监控是一个非常重要的应用领域。当长途运输或者海运冷冻冷藏食品药品时，平衡的温度直接影响细菌的生长，这就要求各种食品药品的保存在适合温度环境下，使其在运输过程中不会发生变质。"
      },

      slideitems: [
        {
          img: require("@/img/intro-carousel/1.jpg"),
          title: "冷链数据管理专家",
          introduction:
            "食品、药品（疫苗）等在运输和储藏过程中的温度监控是一个非常重要的应用领域。当长途运输或者海运冷冻冷藏食品药品时，平衡的温度直接影响细菌的生长，这就要求各种食品药品的保存在适合温度环境下，使其在运输过程中不会发生变质。"
        },
        {
          img: require("@/img/intro-carousel/2.jpg"),
          title: "冷链数据管理专家",
          introduction: "食品、药品（疫苗）等在运输和储藏过程中的温度监控是一个非常重要的发生变质。"
        }
      ] // banner切换列表
    };
  }
};
</script>
<style lang="scss" scoped>
#intro {
  display: table;
  width: 100%;
  position: relative;
  top:-70px;
  height: 100vh;
  background: #000;
  .carousel-item {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .carousel-item::before {
    content: "";
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }
  .carousel-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
  }
  .carousel-content {
    text-align: center;
  }
  h2 {
    color: #fff;
    margin-bottom: 30px;
    font-size: 48px;
    font-weight: 700;
  }
  p {
    width: 80%;
    margin: 0 auto 30px auto;
    color: #fff;
  }
  .btn-get-started {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 8px 32px;
    border-radius: 50px;
    transition: 0.5s;
    margin: 10px;
    color: #fff;
    background: #18d26e;
  }
}
</style>
